<template>
	<section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyWords" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="loadListData">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--列表
      :data :用于列表展示的数据
      sortable:开启排序功能 [不会经过后台]
    -->
    <el-table :data="listDatas" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="sn" label="部门编号" width="120" sortable>
      </el-table-column>
      <el-table-column prop="name" label="部门名称" width="100"  sortable>
      </el-table-column>
      <el-table-column prop="dirPath" label="部门层级" width="100" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="100" :formatter="formatState" sortable>
      </el-table-column>
      <el-table-column prop="manager_id" label="负责人" width="120" sortable>
      </el-table-column>
      <el-table-column prop="parent_id" label="上级部门" min-width="180" sortable>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination :page-sizes="sizeList" @size-change="handleSizeChange" layout="sizes,prev, pager, next"
                     @current-change="handleCurrentChange"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增编辑的界面
      addForm:用于表单验证的引用
    -->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="department" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="部门编号" prop="sn">
          <el-input v-model="department.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="department.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="department.state">
            <el-radio class="radio" :label="0">启用</el-radio>
            <el-radio class="radio" :label="-1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门经理" prop="manager_id">
          <el-input v-model="department.manager_id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="parent_id">
          <el-input v-model="department.parent_id" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

	</section>
</template>

<script>
  import util from "../../common/js/util";
  import {addUser} from "../../api/api";

  export default {
		data() {
			return {
        filters: {//用于高级查询的属性绑定对象
          keyWords: ''
        },
        listLoading:false,//开启加载效果
        listDatas:[],
        sels: [],//列表选中行
        total:0, //分页总条数
        pageSize:10,//每页展示条数
        currentPage:1,
        sizeList:[5, 10, 15, 20],
        addFormVisible:false, //用来控制模态框的 开启或关闭
        department:{
          id:null,
          sn:'',
          name:'',
          dirPath:'',
          state:0,
          manager_id:null,
          parent_id:null,
        },
        addLoading:false,
        addFormRules: {//定义验证规则
          name: [//要校验的字段名字  表单里面的 el-form-item 里面的prop属性
              // required：必填  message：消息的提示 trigger：触发的规则
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
			}
		},
		methods: {
		  //编辑按钮
      handleEdit(index,row){
        //数据回显
        //console.debug(index,row)
       /* this.department={
          id:row.id,
          name:row.name
        }*/
        this.department = Object.assign({}, row);
        //打开模态框
        this.addFormVisible=true;
      },
      addSubmit(){//新增弹出框里面的 提按钮触发的事件
        this.$refs.addForm.validate((valid) => {
          //表单提交的数据 是否符合验证规则
          if (valid) {
            this.$http.put("/api/department",this.department).then(res=>{
              let {success,message}=res.data;
              if(success){
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
              }else {
                this.$message.error("网络异常");
              }
              //刷新列表数据
              this.loadListData();
              //关闭模态框
              this.addFormVisible=false;
            })
          }
        });
      },
      //显示新增界面
      handleAdd(){
        this.addFormVisible = true;
        this.department = {
          id:null,
          sn:'',
          name:'',
          dirPath:'',
          state:0,
          manager_id:null,
          parent_id:null,
        };
      },
      handleDel(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         //用户点了确认删除  /api/department/26
          this.$http.delete("/api/department/"+row.id).then(res=>{
            console.debug(res)
            let {success, message}=res.data;
            if(success){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message.error("网络异常");
            }
            //重新加载列表
            this.loadListData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val){//当切换每页展示条数的时候触发
        this.pageSize = val;
        //重新加载列表
        this.loadListData();
      },
      handleCurrentChange(val){//val 就是要展示的当前页
        //动态改变currentPage 页码
        this.currentPage =val;
        //重新加载列表
        this.loadListData();

      },
      batchRemove(){//批量删除
        //var ids = this.sels.map(item => item.id).toString();//获取所有删除数据的id   1,2,3
        var ids = this.sels.map(item => item.id);//获取所有删除数据的id   [1,2]

        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          //开启加载的效果
          //this.listLoading = true;
          this.$http.patch("/api/department",ids).then(res=>{
            console.debug("批量删除数据返回：",res)
            let {success, message}=res.data;
            if(success){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message.error("网络异常");
            }
            //重新加载列表
            this.loadListData();

          })


        }).catch(() => {//点击取消的效果
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //性别显示转换
      formatState: function (row, column) {
        return row.state == 0 ? '启用': '禁用';
      },
		  //当 用户 勾选数据的时候 触发
      selsChange: function (sels) {
        this.sels = sels;
      },
      //加载列表数据
      loadListData(){
        //准备请求数据
        let param={
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          keyWords: this.filters.keyWords
        }
        //1.发送axios请求 加载全部数据
        this.$http.post("/api/department",param).then(res=>{
            console.debug(res)
            this.listDatas=res.data.data;
            this.total=res.data.total;
        })
        //2.把加载效果关闭
        //3.给listDatas赋值

      }

		},
		mounted() {
		  //页面加载完毕以后立即执行
      this.loadListData();
		}
	}
</script>

<style scoped>

</style>